<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :md="16">
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>项目基础信息</span>
            <div class="float-right">
              <el-button
                v-permission="['bidder']"
                @click="
                  $router.push('/bidding/evaluation_result_purchaser_agree')
                "
                type="primary"
                plain
                size="small"
                >拟定结果（组长）
              </el-button>
            </div>
          </div>
          <el-form :model="form" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12">
                <el-form-item label="招标名称">{{ form.title }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标编号">{{ form.code }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="采购单位">{{ form.company }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标方式">{{ form.way }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>专家评标</span>
            <el-button type="primary" plain class="float-right" size="small"
              >历史评分
            </el-button>
          </div>
          <el-row :gutter="8">
            <el-col :md="6" v-for="(item, index) in expert" :key="index">
              <el-card shadow="never" style="background: #e9e9e9">
                {{ item.name }}
                <ul>
                  <li>技术标：{{ item.tec }}</li>
                  <li>商务标：{{ item.bus }}</li>
                </ul>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>评标项目</span>
            <div class="float-right">
              <el-button type="primary" size="small" plain
                >查看比价明细
              </el-button>
              <el-button
                v-permission="['bidder']"
                type="primary"
                size="small"
                plain
                >发起下轮报价（组长）
              </el-button>
            </div>
          </div>
          <el-table :data="lists" border highlight-current-row>
            <el-table-column
              label="专家评分汇总"
              prop="supplier"
              min-width="200"
            ></el-table-column>
            <el-table-column
              label="报价IP"
              prop="IP"
              min-width="160"
            ></el-table-column>
            <el-table-column label="专家1评分" align="center">
              <el-table-column
                label="技术评分"
                prop="expert-1-tec"
                align="center"
              ></el-table-column>
              <el-table-column
                label="商务评分"
                prop="expert-1-bus"
                align="center"
              ></el-table-column>
            </el-table-column>
            <el-table-column label="专家2评分" align="center">
              <el-table-column
                label="技术评分"
                prop="expert-2-tec"
                align="center"
              ></el-table-column>
              <el-table-column
                label="商务评分"
                prop="expert-2-bus"
                align="center"
              ></el-table-column>
            </el-table-column>
            <el-table-column label="专家3评分" align="center">
              <el-table-column
                label="技术评分"
                prop="expert-3-tec"
                align="center"
              ></el-table-column>
              <el-table-column
                label="商务评分"
                prop="expert-3-bus"
                align="center"
              ></el-table-column>
            </el-table-column>
            <el-table-column label="评分汇总" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row["expert-1-tec"] +
                  scope.row["expert-1-bus"] +
                  scope.row["expert-2-tec"] +
                  scope.row["expert-2-bus"] +
                  scope.row["expert-3-tec"] +
                  scope.row["expert-3-bus"]
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标意见</span>
          </div>
          <el-input
            type="textarea"
            v-model="opinion"
            placeholder="第一次评标，给个好评。谢谢！"
          ></el-input>
        </el-card>
      </el-col>
      <el-col :md="8">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标流程记录</span>
          </div>
          <div style="height: 200px">
            <el-steps direction="vertical" :active="2">
              <el-step
                title="签到"
                description="确认签到   2020-12-12  12:00:00"
              ></el-step>
              <el-step title="评标">
                <template slot="title">
                  <router-link to="/bidding/evaluation_hall_purchaser">
                    评标
                  </router-link>
                </template>
              </el-step>
              <el-step title="拟定结果">
                <template slot="title">
                  <router-link to="/bidding/evaluation_result_purchaser">
                    拟定结果
                  </router-link>
                </template>
              </el-step>
            </el-steps>
          </div>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>在线沟通</span>
          </div>
          <ul class="list" style="list-style-type: none; padding: 0">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">供应商{{ 1 }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>澄清公告</span>
          </div>
          <ul class="list">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">澄清名称{{ i }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      expert: [],
      lists: [
        {
          supplier: "五矿机电有限公司1",
          IP: "221.239.1.186",
          "expert-1-tec": 17,
          "expert-1-bus": 20,
          "expert-2-tec": 19,
          "expert-2-bus": 20,
          "expert-3-tec": 19,
          "expert-3-bus": 20,
        },
        {
          supplier: "五矿机电有限公司2",
          IP: "221.239.1.186",
          "expert-1-tec": 19,
          "expert-1-bus": 20,
          "expert-2-tec": 19,
          "expert-2-bus": 20,
          "expert-3-tec": 19,
          "expert-3-bus": 20,
        },
        {
          supplier: "五矿机电有限公司3",
          IP: "221.239.1.186",
          "expert-1-tec": 19,
          "expert-1-bus": 22,
          "expert-2-tec": 19,
          "expert-2-bus": 20,
          "expert-3-tec": 12,
          "expert-3-bus": 20,
        },
      ],

      opinion: "",
    };
  },
  methods: {
    initExperts() {
      for (let i = 0; i < 4; i++) {
        this.expert.push({
          name: "张小刚",
          tec: "已完成评标",
          bus: "已完成评标",
        });
      }
    },
  },
  created() {
    this.initExperts();
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #e3e3e3;
  min-height: 100vh;
}
</style>
